<style type="text/css">
#content-center-songGenre {
	width: 540px;
	position: relative;
	float: left;
	padding: 5px;

}
#content-center-songGenre h4 {
	width: 100%;
	padding: 0px 0px 0px 10px;
	margin: 15px 0px 5px 0px;
	background: url('http://localhost/CODE2012/MusicWeb/application/views/user/public/image/icon/icon_all.gif') no-repeat left -526px;
	color:#2c2c2c;
}
#content-center-songGenre ul {
	padding: 15px 5px 5px 5px;
	margin: 0px;
	background: url('http://localhost/CODE2012/MusicWeb/application/views/user/public/image/icon/linespace.gif');
	background-repeat: repeat-x;
	border: 1px solid #d8d8d8;

}

#content-center-songGenre ul li {
	width: 520px;
	padding: 0px;
	border-bottom: 1px solid #e9e9e9;
	height: 80px;
	margin: 0px;
	font-size: 13px;

}
#content-center-songGenre ul li:nth-child(5) {
	//border-bottom:none;
}
#content-center-songGenre ul li p {
	margin: 0px;

}
.listSongGenre-item-title {
	padding: 5px;
}
.listSongGenre-item-title a {
	font-size: 15px;
	font-weight: bold;
	color: #2c2c2c;
	padding: 5px;
}
.listSongGenre-item-info1,.listSongGenre-item-info2 {
	width: 200px;
	float: left;
	margin-left: 20px;
}
.listSongGenre-item-info1 p,.listSongGenre-item-info2 p {
	width: 100%;
	float: left;
}
.listSongGenre-item-info1 p a,.listSongGenre-item-info2 p a {
	color: #08C;
}

.view_all {
	font-size: 12px;
	text-align: right; 
}
.view_all a {
	color:#08C;
	background: url("http://localhost/CODE2012/MusicWeb/application/views/user/public/image/icon/icon_all.gif") no-repeat scroll 62px -1953px transparent;
	padding-right:20px;
}
.view_all a:hover {
	text-decoration: underline;
}
</style>

<div id="content-center-songGenre">
	<h4>Nhạc <?php echo $data_listSongGenre[0]['strGenre'];?></h4>
	<ul>
	<?php
	foreach ($data_listSongGenre as $item) {
		# code...
		echo "<li class='listSongGenre-item'>
			<p class='listSongGenre-item-title'><a href='{$url_path}nghe-nhac/{$item['titleSong']}/{$item['idSong']}.html' >{$item['strFileName']}</a></p>
			<div class='listSongGenre-item-info1'>
				<p>Trình bày: <a href='{$url_path}nghe-sy/{$item['titleArtist']}.html' >{$item['strArtist']}</a></p>";
				if(strlen($item['strNameAuthor']!=0)) {
					echo "<p>Sáng tác: <a href='{$url_path}tac-gia-{$item['idAuthor']}/{$item['titleAuthor']}.html' >{$item['strNameAuthor']}</a></p>";
				} else {
					echo "<p>Sáng tác: <span class='not-define'>N/A</span></p>";
				}
				
			echo "</div>
			<div class='listSongGenre-item-info2'>";
				if(strlen($item['strTheme']!=0)) {
					echo "<p>Chủ đề: <a href='{$url_path}chu-de-{$item['idTheme']}/{$item['titleTheme']}.html' >{$item['strTheme']}</a></p>";
				} else {
					echo "<p>Chủ đề: <span class='not-define'>N/A</span></p>";
				}
			echo "<p>{$item['rating']} lượt nghe</p></div>

		</li> ";
	}
	if(count($data_listSongGenre)>=5) {
	echo "<p class='view_all'><a href='{$url_path}the-loai-{$data_listSongGenre[0]['idGenre']}/{$data_listSongGenre[0]['titleGenre']}/.html' title='Album {$data_listSongGenre[0]['strGenre']}'>Xem tất cả</a></p> "; 
	}
	?>
	</ul>
</div>